<template>
	<view class="content">
    <view class="logo-wrapper">
      <image class="logo" src="../../static/img/logo.png" mode="scaleToFill"></image>
    </view>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">手机号：</text>
				<m-input class="m-input" type="text" clearable focus v-model="mobile" placeholder="请输入手机号码"></m-input>
			</view>
			<view class="input-row">
				<text class="title">验证码：</text>
				<m-input type="text" v-model="code" placeholder="请输入验证码"></m-input>
				<view class="send-code-btn" @click="sendSmsCode">{{codeDuration ? codeDuration + 's' : '发送验证码' }}</view>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
		</view>
    <view>
       <text>温馨提示：未注册找写字楼的手机号，登录时将自动注册，且代表您已同意<text>《用户注册协议》</text></text>
    </view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
  import { sendSms, login } from '../../api/user.js'
	let weixinAuthService
	export default {
		components: {
			mInput
		},
		data() {
			return {
				mobile: '13668170173',
				code: '',
				positionTop: 0,
				codeDuration: 0
			}
		},
		computed: mapState(['forcedLogin']),
		onLoad() {
			
		},
		methods: {
			...mapMutations(['login']),
      initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			async sendSmsCode() {
				if (this.codeDuration) {
					uni.showModal({
						content: `请在${this.codeDuration}秒后重试`,
						showCancel: false
					})
				}
				if (!/^1\d{10}$/.test(this.mobile)) {
					uni.showModal({
						content: '手机号码填写错误',
						showCancel: false
					})
					return
				}
        await sendSms({mobile: this.mobile})
        uni.showModal({
        	content: '验证码发送成功，请注意查收',
        	showCancel: false
        })
        this.codeDuration = 60
        this.codeInterVal = setInterval(() => {
        	this.codeDuration--
        	if (this.codeDuration === 0) {
        		if (this.codeInterVal) {
        			clearInterval(this.codeInterVal)
        			this.codeInterVal = null
        		}
        	}
        }, 1000)
			},
			async loginBySms() {
				if (!/^1\d{10}$/.test(this.mobile)) {
					uni.showModal({
						content: '手机号码填写错误',
						showCancel: false
					})
					return
				}
				// if (!/^\d{3}$/.test(this.code)) {
				// 	uni.showModal({
				// 		title: '验证码为3位纯数字',
				// 		showCancel: false
				// 	});
				// 	return;
				// }
        const data = await login({
          code: this.code,
          username: this.mobile
        })
        uni.showModal({
        	title: '登录成功',
        	showCancel: false
        });
			},
			bindLogin() {
        this.loginBySms()
			},
			toMain(userName) {
				this.login(userName);
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../main/main',
					});
				} else {
					uni.navigateBack();
				}
			},
     },
		onReady() {
			this.initPosition();
		}
	}
</script>

<style>
  .content {
    padding-top: 80upx;
  }

	.send-code-btn {
		width: 120px;
		text-align: center;
		background-color: #0FAEFF;
		color: #FFFFFF;
	}

	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		position: relative;
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		margin: 0 20px;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
  .logo-wrapper {
    padding: 0 40upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 200upx;
    height: 200upx;
  }
</style>
